<template>
  <div class="patient-record-list">

    <scroller  lock-x scrollbar-y height="-40" use-pullup :pullup-config="pullupConfig2" ref="demo2" @on-pullup-loading="load2">
      <ul class="list">
        <li class="flex-box-align" v-for="(item, index) in dataList" :key="index" @click="linkToRecordDetail(item.id)">
          <div class="icon">
            <img src="../../images/patientRecord.png" alt="">
          </div>
          <div class="flex info">
            <p>{{item.patientUserCoreDTO.trueName}}</p>
            <p>{{item.patientUserCoreDTO.gmtCreated}}</p>
          </div>
          <div class="icon-arrow">
            <img src="../../images/rightArrow.png" alt="">
          </div>
        </li>
      </ul>
      <div v-if="noData" class="no-data">没有更多内容</div>
    </scroller>

  </div>
</template>
<script>
  import {Scroller } from 'vux'
  import {parseUrlParams} from "../../../wechat/static/util/util.js";
  let CONSTANT = require('../../../wechat/static/constant/constant.js'),
    common = require("../../../wechat/static/common/common.js"),
    wsService = require("../../../wechat/static/common/wechat-jsdk.js");

  export default {
    data() {
      return {
        dataList: [
          {id: "12", name: "电子病历1", time: "2013-4-3"},
          {id: "13", name: "电子病历2", time: "2013-5-4"},
        ],
        id: "",
        dataList:[],
        pullupConfig2: {
          content: '上拉加载更多',
          downContent: '松开进行加载',
          upContent: '上拉加载更多',
          loadingContent: '加载中...'
        },
        pageIndex:1,
        dataForm:'',
        loading:true,
        noData:false
      }
    },
    components: {
      Scroller
    },
    mounted() {
      this.id = parseUrlParams("id")
      this.getList()
    },
    methods: {
      linkToRecordDetail(id) {
        this.$router.push({path: "/patient/record/detail", query: {id: id}})
      },
      load2 () {
        if(!this.loading) return false;
        let { pageIndex, pageCount} = this.dataForm;
        if (pageCount <= this.pageIndex){
          setTimeout(() => {
            this.$refs.demo2.disablePullup()
            this.noData = true
          }, 100)
          return false;
        }
        this.loading = false;
        this.pageIndex++;
        setTimeout(() => {
          this.getList()
          this.$refs.demo2.donePullup()
        }, 100)
      },
      getList() {
        let url = CONSTANT.URL.PATIENT.CASELIST,
          param = {pageIndex: this.pageIndex, pageSize: 10}
        common.requestAjax(url, JSON.stringify({patientId: this.id}), param, (res) => {
          if (res.status == 200) {
            this.loading = true;
            let data = res.data,
              pageCount = data.pageCount,
              bussData = data.bussData
            if(pageCount == 0||pageCount == 1){
              this.$refs.demo2.disablePullup()
              this.noData = true
            }
            this.dataForm = data;
            this.dataList = this.pageIndex <= pageCount ? this.dataList.concat(bussData) : this.dataList
          } else {

          }
        })
      }
    }
  };
</script>
<style lang="less">
  .xs-plugin-pullup-container{
    font-size: 12px;
    bottom: -50px;
  }
  .patient-record-list {
    height: 100%;
    background-color: #f4f4f4;
    font-size: .32rem;
    .no-data{
      padding-top: .5rem;
      color: #999;
      font-size: 14px;
      bottom: 0rem;
      text-align: center;
      position: relative;
    }
    .list {
      background-color: #fff;
      li {
        padding: .25rem .30rem .25rem 0;
        margin-left: .3rem;
        border-bottom: 1px solid #e1e1e1;
        &:last-child {
          border-bottom: none;
        }
        .icon {
          width: .57rem;
          img {
            width: 100%;
            height: 100%;
            vertical-align: middle;
          }
        }
        .info {
          margin-left: .22rem;
          p:first-child {
            margin-bottom: .19rem;
          }
          p:last-child {
            font-size: .24rem;
            color: #999;
          }
        }
        .icon-arrow {
          width: .18rem;
          img {
            width: 100%;
            height: 100%;
            vertical-align: middle;
          }
        }
      }

    }
  }
</style>
